2020-11-15 17:33:31

<template>
  <div>
    酒店模块
    <div id="container"></div>
  </div>
</template>


<script>
export default {
  mounted() {
    window.onLoad = function () {
      var map = new AMap.Map("container", {
        zoom: 23, //级别
        center: [113.3245904, 23.1066805], //中心点坐标
        viewMode: "3D", //使用3D视图
      });

      // 创建一个 Marker 实例：
      var marker = new AMap.Marker({
        position: new AMap.LngLat(113.3245904, 23.1066805), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: "广州",
      });
      // 将创建的点标记添加到已有的地图实例：
      map.add(marker);

      AMap.plugin("AMap.ToolBar", function () {
        //异步加载插件
        var toolbar = new AMap.ToolBar();
        map.addControl(toolbar);
      });

      // var infoWindow = new AMap.InfoWindow({
      //   //创建信息窗体
      //   isCustom: true, //使用自定义窗体
      //   content: "<div>信息窗体</div>", //信息窗体的内容可以是任意html片段
      //   offset: new AMap.Pixel(16, -45),
      // });
      // var onMarkerClick = function (e) {
      //   infoWindow.open(map, e.target.getPosition()); //打开信息窗体
      //   //e.target就是被点击的Marker
      // };
      // var marker = new AMap.Marker({
      //   position: [113.318977, 23.114155],
      // });
      // map.add(marker);
      // marker.on("click", onMarkerClick); //绑定click事件
    };
    var url =
      "https://webapi.amap.com/maps?v=1.4.15&key=6834f5fc6137b75d68ff4550b85a7d44&callback=onLoad";
    var jsapi = document.createElement("script");
    jsapi.charset = "utf-8";
    jsapi.src = url;
    document.head.appendChild(jsapi);
  },
};
</script>


<style lang="less" scoped>
#container {
  width: 800px;
  height: 600px;
}
</style>